
// const VISUAL_CONFIG = { width: 1920, height: 1080 }  // 290 120

// export default {
//     data() {
//         return {
//             screenScaleMixin: {
//                 scaleX: 1,
//                 scaleY: 1,
//                 uiFileWidth: VISUAL_CONFIG.width, // UI设计稿宽度
//                 uiFileHeight: VISUAL_CONFIG.height // UI设计稿高度
//             }
//         }
//     },
//     computed: {
//         outerStyle() {
//             return {
//                 height: 1080 * this.screenScaleMixin.scaleX + 20 + 'px'
//             }
//         },
//         scaleStyle() {
//             if(window.screen.height == 1080 && window.screen.width == 1920) {
//                 return {
//                     width: '100%',height: '100%'
//                 }
//             }else{
//                 return {
//                     transform: `scale(${this.screenScaleMixin.scaleX}, ${this.screenScaleMixin.scaleY})`
//                 }
//             }

//         }
//     },
//     mounted() {
//         this.initScaleEvent()
//     },
//     beforeDestroy() {
//         this._removeScaleEvent()
//     },
//     methods: {
//         initScaleEvent() {
//             this._scale()
//             window.addEventListener('resize', this._scale)
//         },
//         _removeScaleEvent() {
//             window.removeEventListener('resize', this._scale)
//         },
//         _scale() {
//             const pageWidth = document.body.clientWidth || window.innerWidth
//             const pageHeight = document.body.clientHeight || window.innerHeight
//             this.screenScaleMixin.scaleX = pageWidth / this.screenScaleMixin.uiFileWidth
//             this.screenScaleMixin.scaleY = pageHeight / this.screenScaleMixin.uiFileHeight
//         }
//     }
// }



import { ref, onMounted, onUnmounted } from 'vue'
export function ScaleMin() {

    let screenScaleMixin = reactive({
        scaleX: 1,
        scaleY: 1,
        uiFileWidth: 1920, // UI设计稿宽度
        uiFileHeight: 1080 // UI设计稿高度
    })

    onMounted(() => {
        initScaleEvent()
    })

    function initScaleEvent() {
        _scale()
        window.addEventListener('resize', _scale)
    }

    function _scale() {
        const pageWidth = document.body.clientWidth || window.innerWidth
        const pageHeight = document.body.clientHeight || window.innerHeight
        screenScaleMixin.scaleX = pageWidth / screenScaleMixin.uiFileWidth
        screenScaleMixin.scaleY = pageHeight / screenScaleMixin.uiFileHeight
    }

    const scaleStyle = computed(() => {
        // if (window.screen.height == 1080 && window.screen.width == 1920) {
        //     return {
        //         width: '100%', height: '100%'
        //     }
        // } else {
        //     return {
        //         transform: `scale(${this.screenScaleMixin.scaleX}, ${this.screenScaleMixin.scaleY})`
        //     }
        // } 
        // if (window.screen.height == 1080 && window.screen.width == 1920) {
            if (window.innerWidth == 1920 && window.innerHeight == 953) {
            return {
                'transform-origin': `0 0`,
                transform: `scale(${screenScaleMixin.scaleX}, ${screenScaleMixin.scaleY})`
            }
        }else{
            return{
                transform: `scale(1)`
            }
        }

    });



    return {
        scaleStyle
    }
}
